<template>
    <div class="company-business-category">
        <search-form :searchArray="searchArray" @search="getList" :searchObj="searchObj" >
        </search-form>
        <elTable :formData="formData" @getList="getList">
                <el-table-column prop="name" label="公司名称" align="center">
                    <template slot-scope="scope">
                        {{scope.row.company && scope.row.company.name || ''}}
                    </template>
                </el-table-column>
                <el-table-column prop="createTime" label="企业性质" align="center">
                    <template slot-scope="scope">
                        {{scope.row.company && scope.row.company.companyNature && scope.row.company.companyNature.name || ''}}
                    </template>
                </el-table-column>
                <el-table-column prop="createTime" label="组织机构代码" align="center">
                    <template slot-scope="scope">
                        {{scope.row.company && scope.row.company.organizingCode || ''}}
                    </template>
                </el-table-column>
                <el-table-column prop="mobile" label="手机号" align="center">
                    <template slot-scope="scope">
                        {{scope.row.company && scope.row.company.mobile || ''}}
                    </template>
                </el-table-column>
                <el-table-column prop="createTime" label="联系人" align="center">
                    <template slot-scope="scope">
                        {{scope.row.company && scope.row.company.contacts || ''}}
                    </template>
                </el-table-column>
                <el-table-column prop="createTime" label="证书类型" align="center">
                    <template slot-scope="scope">
                        {{scope.row.company && scope.row.company.organizingCode || ''}}
                    </template>
                </el-table-column>
                <el-table-column prop="contacts" label="经营类别" align="center">
                    <template slot-scope="scope">
                        {{scope.row.drugcCategory && scope.row.drugcCategory.name || ''}}
                    </template>
                </el-table-column>
                <el-table-column prop="createTime" label="审核状态" align="center">
                    <template slot-scope="scope">
                        {{scope.row.statusMessage || ''}}
                    </template>
                </el-table-column>
                <el-table-column prop="createTime" label="创建时间" align="center">
                    <template slot-scope="scope">
                        {{scope.row.company && scope.row.company.createTime && $normalTime(scope.row.company.createTime) || ''}}
                    </template>
                </el-table-column>
                <el-table-column prop="action" label="操作" align="center" width="120px;" fixed="right">
                    <template slot-scope="scope">
                        <el-button type="text"  @click="examine(scope.row)" v-if="scope.row.status == 1">审核</el-button>
                    </template>
                </el-table-column>
        </elTable>
        <dialogs
        title="审核"
        :visible="showAuditDialog"
        width="500px"
        @confirm="confirmChangeStatus"
        class="sh-dialog"
        >
          <el-form v-model="statusForm" label-width="80px">
              <el-form-item label="状态">
                  <el-select  v-model="statusForm.status" placeholder="请选择状态">
                      <el-option value="-1" label="拒绝" ></el-option>
                      <el-option value="2" label="通过" ></el-option>
                  </el-select>
              </el-form-item>
              <el-form-item label="审核原因">
                  <textarea v-model.trim="statusForm.auditLog.memo" placeholder="请输入审核原因"></textarea>
              </el-form-item>
          </el-form>
        </dialogs>
    </div>
</template>
<script>
import elTable from "@/components/xForm/elTable"
import { mapGetters } from 'vuex'
export default {
    name: 'companyBusinessCategory',
    components: {
        elTable
    },
    data () {
        return {
            statusForm: {
                status: '',
                auditLog: {
                    memo: ''
                }
            },
            showAuditDialog: {
                show: false
            },
            formData: {
                currentPage: 1,
                pageSize: 10,
                total: 0,
                data: []
            },
            searchObj: {
                drugCategoryId: '',
                status: ''
            },
            searchArray: [
                {
                    type: "select",
                    placeholder: "请选择",
                    filterable: false,
                    value: "",
                    width: '',
                    label: '经营类别',
                    key: 'drugCategoryId',
                    list:  []
                },
                {
                    type: "select",
                    placeholder: "请选择",
                    filterable: false,
                    value: "",
                    width: '',
                    label: '审核状态',
                    key: 'status',
                    list: []
                },
            ],
            currentItem: {}
        }
    },
    computed: {
        ...mapGetters({
            enumAll: 'common/getEnumAll'
        }),
    },
    created () {
        this.init()
        this.getList()
    },
    methods: {
        init () {
            this.$set(this.searchArray[0], 'list', this.enumAll.EnumMasterType || [])
            this.$set(this.searchArray[1], 'list', this.enumAll.EnumCompanyStatus || [])
        },
        examine (item) {
            this.currentItem = item
            this.showAuditDialog.show = true
        },
        confirmChangeStatus () {
            const {statusForm: {status, auditLog: {memo}}, currentItem: {id}} = this
            if (!status) {
                this.$message.error('请选择审核状态')
                return
            }
            if (!memo) {
                this.$message.error('请输入审核原因')
                return
            }
            let param = {
                status,
                auditLog: {
                    memo
                },
                id
            }
            this.$loading(true)
            this.$api.userManage.putCompanyBusinessCategoryAudit(param).then(r => {
                this.$message.success(r.message)
                this.showAuditDialog.show = false
                setTimeout(() => {
                    this.getList()
                }, 1000)
            }).finally(() => {
                this.$loading(false)
            })
        },
        getList (status = true) {
            if (!status) this.formData.currentPage = 1
            const {searchObj, formData: {currentPage, pageSize}} = this
            let param = {}
            param = {
                currentPage,
                pageSize,
                companyId: this.$route.params.id
            }
            for (let k in searchObj) {
                if (searchObj[k] !== '') {
                    param[k] = searchObj[k]
                }
            }
            this.$loading(true)
            this.$api.userManage.getCompanyBusinessCategoryList(param).then(r => {
                this.formData.data = r.data && r.data.list || []
                this.formData.total = r.data && r.data.total || 0
            }).finally(() => {
                this.$loading(false)
            })
        }
    },
    watch: {
        'showAuditDialog.show' (val) {
            if (!val) {
                this.statusForm = {
                    status: '',
                    auditLog: {
                        memo: ''
                    }
                }
            }
        }
    }
}
</script>
<style lang="scss" scoped>
.company-business-category {
    ::v-deep.sh-dialog {
        .el-form {
            .el-select {
                width: 100%;
            }
            textarea {
                width: 100%;
                height: 100px;
                border: 1px solid #ddd;
                box-sizing: border-box;
                padding: 10px;
                &:focus {
                    outline: none;
                }
            }
        }
    }
}
</style>